import { Button, Form, Input, message } from "antd";
import {
	UserOutlined,
	LockOutlined,
    PlusCircleOutlined,
} from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import { loginServer } from "@/servers/userServer";
import storage from "@/utils/storage";
import { UserForm } from "@/types/user";



export default function LoginForm() {
	const navigate = useNavigate();
	const onFinish =  async (values: UserForm) => {
      


       
        const res = await loginServer(values);
		let { data ,code ,message:msg  } = res.data;
        if(code === 200 || code === 201){
            storage.setStorage("token", data.token);
            storage.setStorage("user_info", JSON.stringify(data.userInfo));
            message.success('登录成功') 
            setTimeout(() => {
                navigate("/");
            }, 200);
        }else{
            message.error(msg) 
        }
	};

	const onFinishFailed = () => {
		console.log("点击onFinishFailed");
	};

    const gotoRegister = () =>{
        navigate('/register')
    }

	interface FieldType {
		username?: string;
		password?: string;
	}

	return (
		<Form
			name="basic"
			onFinish={onFinish}
			onFinishFailed={onFinishFailed}
			size="large"
			autoComplete="off"
		>
			<Form.Item<FieldType>
				name="username"
				rules={[{ required: true, message: "请填写你的用户名!" }]}
			>
				<Input
					placeholder="用户名：admin / user"
					prefix={<UserOutlined />}
				/>
			</Form.Item>

			<Form.Item<FieldType>
				name="password"
				rules={[{ required: true, message: "请填写你的密码！" }]}
			>
				<Input.Password
					autoComplete="new-password"
					placeholder="密码：123456"
					prefix={<LockOutlined />}
				/>
			</Form.Item>
			<Form.Item className="login-btn">
				<Button onClick={gotoRegister} icon={<PlusCircleOutlined />}>注册</Button>
				<Button
					type="primary"
					htmlType="submit"
					icon={<LockOutlined />}
				>
					登录
				</Button>
			</Form.Item>
		</Form>
	);
}
